<template>
  <div class="rag-knowledge-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">RAG知识库管理</h1>
        <p class="page-subtitle">管理用于检索的文档源、维修手册、历史案例、故障代码表</p>
      </div>
      <div class="header-right">
        <button class="header-btn" @click="rebuildIndex">
          🔄 重建索引
        </button>
        <button class="header-btn" @click="testQuery">
          🔍 测试查询
        </button>
        <button class="header-btn primary" @click="uploadDocument">
          ➕ 上传文档
        </button>
      </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon">📚</div>
        <div class="stat-content">
          <div class="stat-number">{{ totalDocuments }}</div>
          <div class="stat-label">总文档数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">💾</div>
        <div class="stat-content">
          <div class="stat-number">{{ totalSize }}</div>
          <div class="stat-label">存储大小</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">🔗</div>
        <div class="stat-content">
          <div class="stat-number">{{ vectorCount }}</div>
          <div class="stat-label">向量数量</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⚡</div>
        <div class="stat-content">
          <div class="stat-number">{{ indexingStatus }}</div>
          <div class="stat-label">索引状态</div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <!-- 左侧文档分类 -->
      <div class="category-panel">
        <h3 class="panel-title">文档分类</h3>
        
        <div class="category-list">
          <div 
            v-for="category in documentCategories" 
            :key="category.id"
            class="category-item"
            :class="{ active: selectedCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            <div class="category-header">
              <span class="category-icon">{{ category.icon }}</span>
              <span class="category-name">{{ category.name }}</span>
              <span class="category-count">{{ category.count }}</span>
            </div>
            <div class="category-size">{{ category.size }}</div>
          </div>
        </div>

        <!-- 批量操作 -->
        <div class="batch-operations">
          <h4>批量操作</h4>
          <div class="batch-buttons">
            <button class="batch-btn" @click="batchDelete">
              🗑️ 批量删除
            </button>
            <button class="batch-btn" @click="batchExport">
              📤 批量导出
            </button>
            <button class="batch-btn" @click="batchReindex">
              🔄 批量重索引
            </button>
          </div>
          <div class="selected-count">
            已选择: {{ selectedDocuments.length }} 个文档
          </div>
        </div>
      </div>

      <!-- 中间文档列表 -->
      <div class="document-panel">
        <!-- 搜索和筛选 -->
        <div class="search-section">
          <div class="search-box">
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索文档名称、内容..."
              class="search-input"
              @keyup.enter="searchDocuments"
            />
            <button class="search-btn" @click="searchDocuments">🔍</button>
          </div>
          
          <div class="filter-section">
            <select v-model="sortBy" class="filter-select">
              <option value="name">按名称排序</option>
              <option value="date">按日期排序</option>
              <option value="size">按大小排序</option>
              <option value="relevance">按相关性排序</option>
            </select>
            
            <select v-model="fileTypeFilter" class="filter-select">
              <option value="">所有类型</option>
              <option value="pdf">PDF</option>
              <option value="doc">Word</option>
              <option value="txt">文本</option>
              <option value="json">JSON</option>
            </select>
          </div>
        </div>

        <!-- 文档列表 -->
        <div class="document-list">
          <div class="list-header">
            <label class="select-all">
              <input 
                type="checkbox" 
                :checked="isAllSelected"
                @change="toggleSelectAll"
              />
              全选
            </label>
            <span class="document-count">{{ filteredDocuments.length }} 个文档</span>
          </div>

          <div 
            v-for="document in paginatedDocuments" 
            :key="document.id"
            class="document-item"
            :class="{ selected: selectedDocuments.includes(document.id) }"
            @click="selectDocument(document)"
          >
            <div class="document-header">
              <label class="document-checkbox" @click.stop>
                <input 
                  type="checkbox" 
                  :checked="selectedDocuments.includes(document.id)"
                  @change="toggleDocumentSelection(document.id)"
                />
              </label>
              
              <div class="document-icon">
                {{ getFileIcon(document.type) }}
              </div>
              
              <div class="document-info">
                <h4 class="document-name">{{ document.name }}</h4>
                <div class="document-meta">
                  <span class="document-type">{{ document.type.toUpperCase() }}</span>
                  <span class="document-size">{{ formatFileSize(document.size) }}</span>
                  <span class="document-date">{{ formatDate(document.uploadDate) }}</span>
                </div>
              </div>
              
              <div class="document-status" :class="document.status">
                {{ getStatusText(document.status) }}
              </div>
            </div>

            <div class="document-description">
              {{ document.description }}
            </div>

            <div class="document-tags">
              <span 
                v-for="tag in document.tags" 
                :key="tag"
                class="document-tag"
              >
                {{ tag }}
              </span>
            </div>

            <div class="document-actions">
              <button class="action-btn view" @click.stop="viewDocument(document)">
                👁️ 预览
              </button>
              <button class="action-btn edit" @click.stop="editDocument(document)">
                ✏️ 编辑
              </button>
              <button class="action-btn download" @click.stop="downloadDocument(document)">
                📥 下载
              </button>
              <button class="action-btn reindex" @click.stop="reindexDocument(document)">
                🔄 重索引
              </button>
              <button class="action-btn delete" @click.stop="deleteDocument(document)">
                🗑️ 删除
              </button>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <button 
            class="page-btn"
            :disabled="currentPage === 1"
            @click="changePage(currentPage - 1)"
          >
            上一页
          </button>
          
          <div class="page-numbers">
            <button 
              v-for="page in visiblePages" 
              :key="page"
              class="page-number"
              :class="{ active: page === currentPage }"
              @click="changePage(page)"
            >
              {{ page }}
            </button>
          </div>
          
          <button 
            class="page-btn"
            :disabled="currentPage === totalPages"
            @click="changePage(currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>

      <!-- 右侧详情面板 -->
      <div class="detail-panel">
        <h3 class="panel-title">文档详情</h3>
        
        <div v-if="selectedDocument" class="document-details">
          <!-- 基本信息 -->
          <div class="detail-section">
            <h4>基本信息</h4>
            <div class="detail-item">
              <span class="detail-label">文档名称:</span>
              <span class="detail-value">{{ selectedDocument.name }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">文件类型:</span>
              <span class="detail-value">{{ selectedDocument.type.toUpperCase() }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">文件大小:</span>
              <span class="detail-value">{{ formatFileSize(selectedDocument.size) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">上传时间:</span>
              <span class="detail-value">{{ formatDate(selectedDocument.uploadDate) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">最后修改:</span>
              <span class="detail-value">{{ formatDate(selectedDocument.lastModified) }}</span>
            </div>
          </div>

          <!-- 索引信息 -->
          <div class="detail-section">
            <h4>索引信息</h4>
            <div class="detail-item">
              <span class="detail-label">索引状态:</span>
              <span class="detail-value" :class="selectedDocument.indexStatus">
                {{ getIndexStatusText(selectedDocument.indexStatus) }}
              </span>
            </div>
            <div class="detail-item">
              <span class="detail-label">向量数量:</span>
              <span class="detail-value">{{ selectedDocument.vectorCount }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">文本块数:</span>
              <span class="detail-value">{{ selectedDocument.chunkCount }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">索引时间:</span>
              <span class="detail-value">{{ formatDate(selectedDocument.indexDate) }}</span>
            </div>
          </div>

          <!-- 内容预览 -->
          <div class="detail-section">
            <h4>内容预览</h4>
            <div class="content-preview">
              <div class="preview-tabs">
                <button 
                  class="preview-tab"
                  :class="{ active: previewTab === 'text' }"
                  @click="previewTab = 'text'"
                >
                  📄 文本
                </button>
                <button 
                  class="preview-tab"
                  :class="{ active: previewTab === 'chunks' }"
                  @click="previewTab = 'chunks'"
                >
                  🧩 文本块
                </button>
                <button 
                  class="preview-tab"
                  :class="{ active: previewTab === 'vectors' }"
                  @click="previewTab = 'vectors'"
                >
                  🔗 向量
                </button>
              </div>
              
              <div class="preview-content">
                <div v-if="previewTab === 'text'" class="text-preview">
                  {{ selectedDocument.content || '暂无内容预览' }}
                </div>
                <div v-else-if="previewTab === 'chunks'" class="chunks-preview">
                  <div 
                    v-for="(chunk, index) in selectedDocument.chunks" 
                    :key="index"
                    class="chunk-item"
                  >
                    <div class="chunk-header">
                      <span class="chunk-index">块 {{ index + 1 }}</span>
                      <span class="chunk-size">{{ chunk.length }} 字符</span>
                    </div>
                    <div class="chunk-content">{{ chunk }}</div>
                  </div>
                </div>
                <div v-else-if="previewTab === 'vectors'" class="vectors-preview">
                  <div class="vector-stats">
                    <div class="stat-item">
                      <span class="stat-label">维度:</span>
                      <span class="stat-value">{{ selectedDocument.vectorDimension }}</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">模型:</span>
                      <span class="stat-value">{{ selectedDocument.embeddingModel }}</span>
                    </div>
                  </div>
                  <div class="vector-list">
                    向量数据展示区域
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 标签管理 -->
          <div class="detail-section">
            <h4>标签管理</h4>
            <div class="tag-management">
              <div class="current-tags">
                <span 
                  v-for="tag in selectedDocument.tags" 
                  :key="tag"
                  class="current-tag"
                >
                  {{ tag }}
                  <button class="remove-tag-btn" @click="removeTag(tag)">×</button>
                </span>
              </div>
              <div class="add-tag">
                <input 
                  v-model="newTag" 
                  type="text" 
                  placeholder="添加标签"
                  class="tag-input"
                  @keyup.enter="addTag"
                />
                <button class="add-tag-btn" @click="addTag">添加</button>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="no-document-selected">
          <div class="no-selection-icon">📄</div>
          <p>请选择一个文档查看详情</p>
        </div>

        <!-- 知识库配置 -->
        <div class="kb-config">
          <h4>知识库配置</h4>
          <div class="config-item">
            <label class="config-label">嵌入模型</label>
            <select v-model="kbConfig.embeddingModel" class="config-select">
              <option value="text-embedding-ada-002">OpenAI Ada 002</option>
              <option value="sentence-transformers">Sentence Transformers</option>
              <option value="bge-large-zh">BGE Large 中文</option>
            </select>
          </div>
          <div class="config-item">
            <label class="config-label">文本块大小</label>
            <input 
              v-model.number="kbConfig.chunkSize" 
              type="number" 
              class="config-input"
              min="100"
              max="2000"
            />
          </div>
          <div class="config-item">
            <label class="config-label">重叠长度</label>
            <input 
              v-model.number="kbConfig.overlapSize" 
              type="number" 
              class="config-input"
              min="0"
              max="500"
            />
          </div>
          <button class="config-save-btn" @click="saveKbConfig">
            保存配置
          </button>
        </div>
      </div>
    </div>

    <!-- 上传文档弹窗 -->
    <div v-if="showUploadDialog" class="modal-overlay" @click="closeUploadDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>上传文档</h3>
          <button class="close-btn" @click="closeUploadDialog">×</button>
        </div>
        
        <div class="modal-body">
          <div class="upload-area" @drop="handleDrop" @dragover.prevent>
            <div class="upload-icon">📁</div>
            <p>将文件拖拽到此处，或点击选择文件</p>
            <input 
              ref="fileInput"
              type="file" 
              multiple 
              accept=".pdf,.doc,.docx,.txt,.json"
              @change="handleFileSelect"
              style="display: none;"
            />
            <button class="select-file-btn" @click="$refs.fileInput.click()">
              选择文件
            </button>
          </div>
          
          <div v-if="uploadFiles.length" class="upload-files">
            <h4>待上传文件</h4>
            <div 
              v-for="(file, index) in uploadFiles" 
              :key="index"
              class="upload-file-item"
            >
              <div class="file-info">
                <span class="file-name">{{ file.name }}</span>
                <span class="file-size">{{ formatFileSize(file.size) }}</span>
              </div>
              <div class="file-category">
                <select v-model="file.category" class="category-select">
                  <option value="manual">维修手册</option>
                  <option value="case">历史案例</option>
                  <option value="code">故障代码</option>
                  <option value="spec">技术规范</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <button class="remove-file-btn" @click="removeUploadFile(index)">
                🗑️
              </button>
            </div>
          </div>
        </div>
        
        <div class="modal-footer">
          <button class="modal-btn secondary" @click="closeUploadDialog">取消</button>
          <button 
            class="modal-btn primary" 
            @click="uploadDocuments"
            :disabled="!uploadFiles.length"
          >
            上传文档
          </button>
        </div>
      </div>
    </div>

    <!-- 查询测试弹窗 -->
    <div v-if="showQueryDialog" class="modal-overlay" @click="closeQueryDialog">
      <div class="modal-content query-modal" @click.stop>
        <div class="modal-header">
          <h3>知识库查询测试</h3>
          <button class="close-btn" @click="closeQueryDialog">×</button>
        </div>
        
        <div class="modal-body">
          <div class="query-input-section">
            <textarea 
              v-model="testQueryText"
              placeholder="输入查询问题，例如：发动机过热的常见原因有哪些？"
              class="query-textarea"
              rows="3"
            ></textarea>
            <div class="query-params">
              <div class="param-item">
                <label>返回数量:</label>
                <input 
                  v-model.number="queryParams.topK" 
                  type="number" 
                  min="1" 
                  max="20"
                  class="param-input"
                />
              </div>
              <div class="param-item">
                <label>相似度阈值:</label>
                <input 
                  v-model.number="queryParams.threshold" 
                  type="number" 
                  min="0" 
                  max="1" 
                  step="0.1"
                  class="param-input"
                />
              </div>
            </div>
            <button class="query-btn" @click="executeQuery" :disabled="!testQueryText.trim()">
              🔍 执行查询
            </button>
          </div>
          
          <div v-if="queryResults.length" class="query-results">
            <h4>查询结果</h4>
            <div 
              v-for="(result, index) in queryResults" 
              :key="index"
              class="result-item"
            >
              <div class="result-header">
                <span class="result-score">相似度: {{ result.score.toFixed(3) }}</span>
                <span class="result-source">来源: {{ result.source }}</span>
              </div>
              <div class="result-content">{{ result.content }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedCategory = ref('')
const sortBy = ref('date')
const fileTypeFilter = ref('')
const currentPage = ref(1)
const itemsPerPage = 12

const selectedDocuments = ref([])
const selectedDocument = ref(null)
const previewTab = ref('text')
const newTag = ref('')

const showUploadDialog = ref(false)
const showQueryDialog = ref(false)
const uploadFiles = ref([])

const testQueryText = ref('')
const queryParams = reactive({
  topK: 5,
  threshold: 0.7
})
const queryResults = ref([])

// 知识库配置
const kbConfig = reactive({
  embeddingModel: 'text-embedding-ada-002',
  chunkSize: 500,
  overlapSize: 50
})

// 文档分类
const documentCategories = ref([
  { id: '', name: '全部文档', icon: '📚', count: 156, size: '2.3GB' },
  { id: 'manual', name: '维修手册', icon: '🔧', count: 45, size: '890MB' },
  { id: 'case', name: '历史案例', icon: '📝', count: 67, size: '1.1GB' },
  { id: 'code', name: '故障代码', icon: '⚠️', count: 28, size: '156MB' },
  { id: 'spec', name: '技术规范', icon: '📋', count: 16, size: '234MB' }
])

// 模拟文档数据
const documents = ref([
  {
    id: 1,
    name: 'ZTZ-99A主战坦克维修手册.pdf',
    type: 'pdf',
    category: 'manual',
    size: 45678901,
    uploadDate: '2024-01-15T10:30:00Z',
    lastModified: '2024-03-10T14:22:00Z',
    status: 'indexed',
    indexStatus: 'completed',
    vectorCount: 1245,
    chunkCount: 89,
    vectorDimension: 1536,
    embeddingModel: 'text-embedding-ada-002',
    indexDate: '2024-01-15T11:00:00Z',
    description: '99A主战坦克的完整维修指南，包含发动机、武器系统、通信设备等各子系统的维修流程',
    tags: ['维修', '主战坦克', 'ZTZ-99A', '手册'],
    content: '第一章 发动机系统维修\n\n1.1 发动机概述\n99A主战坦克配备了改进型柴油发动机，具有高功率密度和优良的燃油经济性...',
    chunks: [
      '第一章 发动机系统维修。99A主战坦克配备了改进型柴油发动机，具有高功率密度和优良的燃油经济性。发动机采用涡轮增压技术，最大功率达到1500马力...',
      '1.1 发动机日常保养。日常保养是确保发动机正常运行的重要环节。每日启动前应检查冷却液位、机油液位、燃油量等关键指标...',
      '1.2 发动机故障诊断。当发动机出现异常时，应按照标准流程进行故障诊断。常见故障包括启动困难、功率不足、异常噪音等...'
    ]
  },
  {
    id: 2,
    name: '传感器故障案例库.json',
    type: 'json',
    category: 'case',
    size: 12345678,
    uploadDate: '2024-02-01T09:15:00Z',
    lastModified: '2024-03-12T11:45:00Z',
    status: 'indexed',
    indexStatus: 'completed',
    vectorCount: 567,
    chunkCount: 45,
    vectorDimension: 1536,
    embeddingModel: 'text-embedding-ada-002',
    indexDate: '2024-02-01T10:00:00Z',
    description: '收集了各类传感器故障的历史案例，包含故障现象、诊断过程、解决方案等详细信息',
    tags: ['传感器', '故障案例', '诊断', '维修'],
    content: '案例1: 温度传感器读数异常\n故障现象: 发动机温度显示异常高温，但实际温度正常\n诊断过程: 1. 检查传感器连接线路...',
    chunks: [
      '案例1: 温度传感器读数异常。故障现象: 发动机温度显示异常高温，但实际温度正常。可能原因包括传感器老化、线路接触不良、控制单元故障等...',
      '案例2: 压力传感器失效。故障现象: 液压系统压力显示为零，但系统正常工作。诊断步骤：首先检查传感器电源供应，然后检查信号线路...',
      '案例3: 位置传感器漂移。故障现象: 炮塔位置显示与实际位置不符。该故障通常由传感器标定偏移、机械磨损或电磁干扰引起...'
    ]
  },
  {
    id: 3,
    name: '故障代码对照表.txt',
    type: 'txt',
    category: 'code',
    size: 2345678,
    uploadDate: '2024-02-10T14:20:00Z',
    lastModified: '2024-03-08T16:30:00Z',
    status: 'indexing',
    indexStatus: 'processing',
    vectorCount: 234,
    chunkCount: 28,
    vectorDimension: 1536,
    embeddingModel: 'text-embedding-ada-002',
    indexDate: '2024-02-10T14:45:00Z',
    description: '标准故障代码及其对应的故障描述、可能原因和建议处理方法',
    tags: ['故障代码', '诊断', '标准'],
    content: 'E001: 发动机启动失败\n描述: 发动机无法正常启动或启动后立即熄火\n可能原因: 1. 燃油供应不足 2. 启动电机故障...',
    chunks: [
      'E001: 发动机启动失败。描述: 发动机无法正常启动或启动后立即熄火。可能原因包括燃油供应不足、启动电机故障、点火系统问题等...',
      'E002: 冷却系统过热。描述: 发动机冷却液温度超过正常范围。常见原因有冷却液不足、散热器堵塞、水泵故障、节温器失效等...',
      'E003: 液压系统压力异常。描述: 液压系统工作压力低于或高于标准值。可能由液压泵故障、管路泄漏、溢流阀调节不当等原因造成...'
    ]
  },
  {
    id: 4,
    name: '武器系统技术规范.doc',
    type: 'doc',
    category: 'spec',
    size: 8901234,
    uploadDate: '2024-02-25T11:10:00Z',
    lastModified: '2024-03-15T09:20:00Z',
    status: 'pending',
    indexStatus: 'pending',
    vectorCount: 0,
    chunkCount: 0,
    vectorDimension: 1536,
    embeddingModel: 'text-embedding-ada-002',
    indexDate: null,
    description: '武器系统的技术参数、性能指标、操作规程和安全要求',
    tags: ['武器系统', '技术规范', '参数'],
    content: '武器系统技术规范\n\n第一部分：主炮系统\n1.1 技术参数\n口径：125mm\n炮管长度：48倍口径...',
    chunks: []
  }
])

// 计算属性
const totalDocuments = computed(() => documents.value.length)
const totalSize = computed(() => {
  const bytes = documents.value.reduce((sum, doc) => sum + doc.size, 0)
  return formatFileSize(bytes)
})
const vectorCount = computed(() => {
  return documents.value.reduce((sum, doc) => sum + doc.vectorCount, 0).toLocaleString()
})
const indexingStatus = computed(() => {
  const indexedCount = documents.value.filter(doc => doc.indexStatus === 'completed').length
  return `${indexedCount}/${documents.value.length}`
})

const filteredDocuments = computed(() => {
  let filtered = documents.value

  if (selectedCategory.value) {
    filtered = filtered.filter(doc => doc.category === selectedCategory.value)
  }

  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(doc => 
      doc.name.toLowerCase().includes(query) ||
      doc.description.toLowerCase().includes(query) ||
      doc.tags.some(tag => tag.toLowerCase().includes(query))
    )
  }

  if (fileTypeFilter.value) {
    filtered = filtered.filter(doc => doc.type === fileTypeFilter.value)
  }

  // 排序
  filtered.sort((a, b) => {
    switch (sortBy.value) {
      case 'name':
        return a.name.localeCompare(b.name)
      case 'size':
        return b.size - a.size
      case 'date':
        return new Date(b.uploadDate) - new Date(a.uploadDate)
      default:
        return 0
    }
  })

  return filtered
})

const paginatedDocuments = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filteredDocuments.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredDocuments.value.length / itemsPerPage)
})

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)
  
  for (let i = start; i <= end; i++) {
    pages.push(i)
  }
  
  return pages
})

const isAllSelected = computed(() => {
  return paginatedDocuments.value.length > 0 && 
         paginatedDocuments.value.every(doc => selectedDocuments.value.includes(doc.id))
})

// 方法
const selectCategory = (categoryId) => {
  selectedCategory.value = categoryId
  currentPage.value = 1
  selectedDocuments.value = []
}

const searchDocuments = () => {
  currentPage.value = 1
  console.log('搜索文档:', searchQuery.value)
}

const selectDocument = (document) => {
  selectedDocument.value = document
}

const toggleDocumentSelection = (documentId) => {
  const index = selectedDocuments.value.indexOf(documentId)
  if (index > -1) {
    selectedDocuments.value.splice(index, 1)
  } else {
    selectedDocuments.value.push(documentId)
  }
}

const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedDocuments.value = selectedDocuments.value.filter(id => 
      !paginatedDocuments.value.some(doc => doc.id === id)
    )
  } else {
    paginatedDocuments.value.forEach(doc => {
      if (!selectedDocuments.value.includes(doc.id)) {
        selectedDocuments.value.push(doc.id)
      }
    })
  }
}

const getFileIcon = (type) => {
  const iconMap = {
    pdf: '📄',
    doc: '📝',
    txt: '📋',
    json: '🔧'
  }
  return iconMap[type] || '📄'
}

const getStatusText = (status) => {
  const statusMap = {
    indexed: '已索引',
    indexing: '索引中',
    pending: '待处理',
    error: '错误'
  }
  return statusMap[status] || status
}

const getIndexStatusText = (status) => {
  const statusMap = {
    completed: '已完成',
    processing: '处理中',
    pending: '待处理',
    error: '错误'
  }
  return statusMap[status] || status
}

const formatFileSize = (bytes) => {
  if (bytes >= 1024 * 1024 * 1024) {
    return (bytes / (1024 * 1024 * 1024)).toFixed(1) + 'GB'
  } else if (bytes >= 1024 * 1024) {
    return (bytes / (1024 * 1024)).toFixed(1) + 'MB'
  } else if (bytes >= 1024) {
    return (bytes / 1024).toFixed(1) + 'KB'
  }
  return bytes + 'B'
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString('zh-CN')
}

const changePage = (page) => {
  currentPage.value = page
}

const uploadDocument = () => {
  showUploadDialog.value = true
}

const closeUploadDialog = () => {
  showUploadDialog.value = false
  uploadFiles.value = []
}

const handleFileSelect = (event) => {
  const files = Array.from(event.target.files)
  files.forEach(file => {
    uploadFiles.value.push({
      file,
      name: file.name,
      size: file.size,
      category: 'manual'
    })
  })
}

const handleDrop = (event) => {
  event.preventDefault()
  const files = Array.from(event.dataTransfer.files)
  files.forEach(file => {
    uploadFiles.value.push({
      file,
      name: file.name,
      size: file.size,
      category: 'manual'
    })
  })
}

const removeUploadFile = (index) => {
  uploadFiles.value.splice(index, 1)
}

const uploadDocuments = () => {
  console.log('上传文档:', uploadFiles.value)
  // 模拟上传过程
  uploadFiles.value.forEach(fileInfo => {
    const newDoc = {
      id: Date.now() + Math.random(),
      name: fileInfo.name,
      type: fileInfo.name.split('.').pop().toLowerCase(),
      category: fileInfo.category,
      size: fileInfo.size,
      uploadDate: new Date().toISOString(),
      lastModified: new Date().toISOString(),
      status: 'pending',
      indexStatus: 'pending',
      vectorCount: 0,
      chunkCount: 0,
      vectorDimension: 1536,
      embeddingModel: kbConfig.embeddingModel,
      indexDate: null,
      description: '新上传的文档，等待处理',
      tags: [],
      content: '',
      chunks: []
    }
    documents.value.unshift(newDoc)
  })
  
  closeUploadDialog()
}

const viewDocument = (document) => {
  console.log('预览文档:', document.name)
  selectedDocument.value = document
}

const editDocument = (document) => {
  console.log('编辑文档:', document.name)
}

const downloadDocument = (document) => {
  console.log('下载文档:', document.name)
}

const reindexDocument = (document) => {
  console.log('重新索引文档:', document.name)
  document.indexStatus = 'processing'
  setTimeout(() => {
    document.indexStatus = 'completed'
    document.indexDate = new Date().toISOString()
  }, 3000)
}

const deleteDocument = (document) => {
  if (confirm(`确定要删除文档 "${document.name}" 吗？`)) {
    const index = documents.value.findIndex(d => d.id === document.id)
    if (index > -1) {
      documents.value.splice(index, 1)
      if (selectedDocument.value && selectedDocument.value.id === document.id) {
        selectedDocument.value = null
      }
    }
  }
}

const batchDelete = () => {
  if (selectedDocuments.value.length === 0) {
    alert('请先选择要删除的文档')
    return
  }
  
  if (confirm(`确定要删除选中的 ${selectedDocuments.value.length} 个文档吗？`)) {
    documents.value = documents.value.filter(doc => !selectedDocuments.value.includes(doc.id))
    selectedDocuments.value = []
  }
}

const batchExport = () => {
  console.log('批量导出文档:', selectedDocuments.value)
}

const batchReindex = () => {
  console.log('批量重新索引文档:', selectedDocuments.value)
  selectedDocuments.value.forEach(docId => {
    const doc = documents.value.find(d => d.id === docId)
    if (doc) {
      doc.indexStatus = 'processing'
    }
  })
}

const addTag = () => {
  if (newTag.value.trim() && selectedDocument.value) {
    if (!selectedDocument.value.tags.includes(newTag.value.trim())) {
      selectedDocument.value.tags.push(newTag.value.trim())
    }
    newTag.value = ''
  }
}

const removeTag = (tag) => {
  if (selectedDocument.value) {
    const index = selectedDocument.value.tags.indexOf(tag)
    if (index > -1) {
      selectedDocument.value.tags.splice(index, 1)
    }
  }
}

const rebuildIndex = () => {
  console.log('重建索引')
  documents.value.forEach(doc => {
    doc.indexStatus = 'processing'
  })
  
  setTimeout(() => {
    documents.value.forEach(doc => {
      doc.indexStatus = 'completed'
      doc.indexDate = new Date().toISOString()
    })
  }, 5000)
}

const testQuery = () => {
  showQueryDialog.value = true
}

const closeQueryDialog = () => {
  showQueryDialog.value = false
  testQueryText.value = ''
  queryResults.value = []
}

const executeQuery = () => {
  console.log('执行查询:', testQueryText.value)
  
  // 模拟查询结果
  queryResults.value = [
    {
      score: 0.89,
      source: 'ZTZ-99A主战坦克维修手册.pdf',
      content: '发动机过热的常见原因包括：1. 冷却液不足或泄漏；2. 散热器堵塞；3. 水泵故障；4. 节温器失效；5. 风扇故障。建议按照标准流程逐一排查。'
    },
    {
      score: 0.76,
      source: '传感器故障案例库.json',
      content: '案例分析：某次发动机过热事件中，发现是由于温度传感器故障导致冷却风扇未能及时启动。更换传感器后问题解决。'
    },
    {
      score: 0.68,
      source: '故障代码对照表.txt',
      content: 'E002: 冷却系统过热。描述: 发动机冷却液温度超过正常范围。常见原因有冷却液不足、散热器堵塞、水泵故障、节温器失效等。'
    }
  ]
}

const saveKbConfig = () => {
  console.log('保存知识库配置:', kbConfig)
  alert('知识库配置已保存')
}

onMounted(() => {
  console.log('RAG知识库管理页面已加载')
  
  // 默认选择第一个文档
  if (documents.value.length > 0) {
    selectedDocument.value = documents.value[0]
  }
})
</script>

<style scoped>
.rag-knowledge-container {
  width: 95vw;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.page-title {
  font-size: 2.8vw;
  margin: 0 0 0.3vh 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.3vw;
  margin: 0;
  opacity: 0.9;
}

.header-right {
  display: flex;
  gap: 1vw;
}

.header-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.header-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-1px);
}

.header-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border-color: #4CAF50;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2vw;
  padding: 2vh 2vw;
  margin-bottom: 1vh;
}

.stat-card {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 2vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  gap: 1.5vw;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-3px);
}

.stat-icon {
  font-size: 2.5vw;
  opacity: 0.8;
}

.stat-number {
  font-size: 2vw;
  font-weight: 700;
  margin-bottom: 0.3vh;
}

.stat-label {
  font-size: 1vw;
  opacity: 0.8;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 0 2vw 2vh 2vw;
  gap: 2vw;
  height: calc(100vh - 20vh);
}

.category-panel {
  width: 18vw;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  overflow-y: auto;
}

.document-panel {
  flex: 1;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
}

.detail-panel {
  width: 25vw;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5vh 1vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  overflow-y: auto;
}

.panel-title {
  font-size: 1.4vw;
  margin: 0 0 1.5vh 0;
  text-align: center;
  color: #4CAF50;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.5vh;
}

.category-list {
  margin-bottom: 2vh;
}

.category-item {
  padding: 1vh 1vw;
  margin-bottom: 0.5vh;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.category-item:hover {
  background: rgba(255,255,255,0.1);
}

.category-item.active {
  background: rgba(76, 175, 80, 0.3);
  border-color: #4CAF50;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3vh;
}

.category-icon {
  font-size: 1.2vw;
}

.category-name {
  font-size: 1vw;
  flex: 1;
  margin-left: 0.8vw;
}

.category-count {
  background: rgba(255,255,255,0.2);
  padding: 0.2vh 0.6vw;
  border-radius: 10px;
  font-size: 0.8vw;
}

.category-size {
  font-size: 0.8vw;
  opacity: 0.7;
  margin-left: 2vw;
}

.batch-operations {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.batch-operations h4 {
  margin: 0 0 1vh 0;
  font-size: 1.1vw;
  color: #4CAF50;
}

.batch-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
  margin-bottom: 1vh;
}

.batch-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.6vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  text-align: left;
  transition: background 0.3s ease;
}

.batch-btn:hover {
  background: rgba(255,255,255,0.2);
}

.selected-count {
  font-size: 0.9vw;
  opacity: 0.8;
  text-align: center;
}

.search-section {
  margin-bottom: 1.5vh;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 0.5vh 1vw;
  margin-bottom: 1vh;
}

.search-input {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.1vw;
  padding: 0.5vh 1vw;
  outline: none;
  flex: 1;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.6);
}

.search-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2vw;
  cursor: pointer;
  padding: 0.3vh;
}

.filter-section {
  display: flex;
  gap: 1vw;
}

.filter-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  color: #fff;
  padding: 0.6vh 1vw;
  font-size: 0.9vw;
  outline: none;
  min-width: 120px;
}

.filter-select option {
  background: #333;
  color: #fff;
}

.document-list {
  flex: 1;
  overflow-y: auto;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 1vh;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.9vw;
  cursor: pointer;
}

.document-count {
  font-size: 0.9vw;
  opacity: 0.8;
}

.document-item {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1.5vh 1vw;
  margin-bottom: 1vh;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.document-item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.document-item.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.document-header {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-bottom: 0.8vh;
}

.document-checkbox {
  cursor: pointer;
}

.document-icon {
  font-size: 1.5vw;
}

.document-info {
  flex: 1;
}

.document-name {
  font-size: 1.1vw;
  margin: 0 0 0.3vh 0;
  font-weight: 600;
}

.document-meta {
  display: flex;
  gap: 1vw;
  font-size: 0.8vw;
  opacity: 0.7;
}

.document-type {
  background: rgba(76, 175, 80, 0.3);
  padding: 0.1vh 0.5vw;
  border-radius: 8px;
}

.document-status {
  padding: 0.3vh 0.8vw;
  border-radius: 12px;
  font-size: 0.8vw;
  font-weight: 600;
}

.document-status.indexed {
  background: rgba(76, 175, 80, 0.3);
  color: #4CAF50;
}

.document-status.indexing {
  background: rgba(255, 152, 0, 0.3);
  color: #FF9800;
}

.document-status.pending {
  background: rgba(158, 158, 158, 0.3);
  color: #9E9E9E;
}

.document-description {
  font-size: 0.9vw;
  opacity: 0.8;
  margin-bottom: 0.8vh;
  line-height: 1.4;
}

.document-tags {
  display: flex;
  gap: 0.5vw;
  margin-bottom: 1vh;
  flex-wrap: wrap;
}

.document-tag {
  background: rgba(255,255,255,0.2);
  padding: 0.2vh 0.6vw;
  border-radius: 10px;
  font-size: 0.8vw;
}

.document-actions {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
}

.action-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.4vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8vw;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(255,255,255,0.2);
}

.action-btn.delete {
  background: rgba(244, 67, 54, 0.2);
  border-color: #F44336;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  margin-top: 1vh;
  padding-top: 1vh;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.page-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.6vh 1.2vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 0.3vw;
}

.page-number {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.5vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9vw;
  transition: all 0.3s ease;
}

.page-number:hover {
  background: rgba(255,255,255,0.2);
}

.page-number.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

.document-details {
  margin-bottom: 2vh;
}

.detail-section {
  margin-bottom: 2vh;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.detail-section h4 {
  margin: 0 0 1vh 0;
  font-size: 1.1vw;
  color: #4CAF50;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.3vh;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5vh;
  font-size: 0.9vw;
}

.detail-label {
  opacity: 0.8;
  min-width: 35%;
}

.detail-value {
  font-weight: 500;
  text-align: right;
}

.detail-value.completed {
  color: #4CAF50;
}

.detail-value.processing {
  color: #FF9800;
}

.detail-value.pending {
  color: #9E9E9E;
}

.content-preview {
  margin-top: 1vh;
}

.preview-tabs {
  display: flex;
  gap: 0.5vw;
  margin-bottom: 1vh;
}

.preview-tab {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.8vw;
  transition: all 0.3s ease;
}

.preview-tab.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

.preview-content {
  background: rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 1vh;
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.8vw;
  line-height: 1.4;
}

.chunks-preview {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.chunk-item {
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 0.8vh;
}

.chunk-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5vh;
  font-size: 0.7vw;
  opacity: 0.7;
}

.chunk-content {
  font-size: 0.8vw;
  line-height: 1.3;
}

.vector-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1vh;
  padding: 0.5vh;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7vw;
}

.stat-label {
  opacity: 0.7;
}

.stat-value {
  font-weight: 600;
  color: #4CAF50;
}

.tag-management {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.current-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5vw;
}

.current-tag {
  background: rgba(76, 175, 80, 0.3);
  padding: 0.3vh 0.8vw;
  border-radius: 12px;
  font-size: 0.8vw;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.remove-tag-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.9vw;
  padding: 0;
}

.add-tag {
  display: flex;
  gap: 0.5vw;
}

.tag-input {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff;
  padding: 0.4vh 0.6vw;
  font-size: 0.8vw;
  outline: none;
  flex: 1;
}

.add-tag-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 0.4vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8vw;
}

.no-document-selected {
  text-align: center;
  padding: 4vh 0;
  opacity: 0.7;
}

.no-selection-icon {
  font-size: 3vw;
  margin-bottom: 1vh;
}

.kb-config {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1vh 1vw;
}

.kb-config h4 {
  margin: 0 0 1vh 0;
  font-size: 1.1vw;
  color: #4CAF50;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 0.3vh;
}

.config-item {
  margin-bottom: 1vh;
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.config-label {
  font-size: 0.9vw;
  opacity: 0.8;
}

.config-input, .config-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff;
  padding: 0.5vh 0.6vw;
  font-size: 0.8vw;
  outline: none;
}

.config-save-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
  width: 100%;
  margin-top: 1vh;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  border-radius: 15px;
  width: 60vw;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.query-modal {
  width: 70vw;
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.6vw;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8vw;
  cursor: pointer;
  padding: 0.3vh 0.8vw;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,255,255,0.1);
}

.modal-body {
  padding: 2vh 2vw;
}

.upload-area {
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 4vh 2vw;
  text-align: center;
  margin-bottom: 2vh;
  transition: border-color 0.3s ease;
}

.upload-area:hover {
  border-color: #4CAF50;
}

.upload-icon {
  font-size: 4vw;
  margin-bottom: 1vh;
  opacity: 0.6;
}

.select-file-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 1vh 2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1vw;
  margin-top: 1vh;
}

.upload-files h4 {
  margin: 0 0 1vh 0;
  font-size: 1.3vw;
  color: #4CAF50;
}

.upload-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vh 1vw;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  margin-bottom: 0.8vh;
}

.file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.file-name {
  font-size: 1vw;
  font-weight: 500;
}

.file-size {
  font-size: 0.8vw;
  opacity: 0.7;
}

.category-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 4px;
  font-size: 0.9vw;
}

.remove-file-btn {
  background: rgba(244, 67, 54, 0.2);
  border: 1px solid #F44336;
  color: #fff;
  padding: 0.4vh 0.8vw;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9vw;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1vw;
  padding: 2vh 2vw;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.modal-btn {
  padding: 1vh 2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
}

.modal-btn.secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.modal-btn.primary {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  color: #fff;
  border-color: #4CAF50;
}

.modal-btn:hover {
  transform: translateY(-1px);
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.query-input-section {
  margin-bottom: 2vh;
}

.query-textarea {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: #fff;
  padding: 1vh 1vw;
  font-size: 1vw;
  resize: vertical;
  outline: none;
  margin-bottom: 1vh;
  box-sizing: border-box;
}

.query-params {
  display: flex;
  gap: 2vw;
  margin-bottom: 1vh;
}

.param-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.9vw;
}

.param-item label {
  opacity: 0.8;
}

.param-input {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  color: #fff;
  padding: 0.4vh 0.6vw;
  font-size: 0.9vw;
  outline: none;
  width: 80px;
}

.query-btn {
  background: #4CAF50;
  border: none;
  color: #fff;
  padding: 1vh 2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  font-weight: 600;
}

.query-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.query-results h4 {
  margin: 0 0 1.5vh 0;
  font-size: 1.3vw;
  color: #4CAF50;
}

.result-item {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1.5vh 1vw;
  margin-bottom: 1vh;
  border-left: 4px solid #4CAF50;
}

.result-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8vh;
  font-size: 0.9vw;
}

.result-score {
  color: #4CAF50;
  font-weight: 600;
}

.result-source {
  opacity: 0.7;
}

.result-content {
  font-size: 1vw;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    height: auto;
  }
  
  .category-panel, .detail-panel {
    width: 100%;
    height: 30vh;
  }
  
  .page-title {
    font-size: 5vw;
  }
  
  .page-subtitle {
    font-size: 2.5vw;
  }
  
  .header-btn {
    font-size: 2vw;
    padding: 1vh 2vw;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-icon {
    font-size: 4vw;
  }
  
  .stat-number {
    font-size: 3.5vw;
  }
  
  .modal-content {
    width: 95vw;
    margin: 1vh;
  }
  
  .query-params {
    flex-direction: column;
    gap: 1vh;
  }
}
</style>
